<template>
  <div class="banner">
    <div class="main">

      <!--        ///////////////////////////-->
      <!--        总体介绍书籍头部-->
      <header class="reader-header">
        <!--            头部左边-->
        <div class="reader-header-left">

          <div class="reader-header-decoration-2">
            <span>党建</span>
          </div>

          <h2 class="reader-title">
            党建书刊
          </h2>
        </div>

        <!--            头部中间-->
        <div class="reader-header-middle">
          <h4 class="reader-header-title-1">
            阅读书籍&nbsp;&nbsp;&nbsp;&nbsp;——
          </h4>
          <h4 class="reader-header-book-title">
            《红色经典》
          </h4>
          <!--                //////红色横杠装饰-->
          <div class="reader-header-decoration-1">
          </div>
          <div class="reader-header-author">
            作者:<span>张全民·褚树荣</span>
          </div>
          <div class="reader-header-publisher">
            出版社:<span>上海教育出版社</span>
          </div>
          <div class="reader-header-time">
            出版时间:<span>2018年</span>
          </div>

          <p class="reader-header-blurb">
            《红色经典》一书的文章涵盖了中华人民共和国创建和社会主义建设各个重要阶段的内容。波澜壮阔，丰富多彩…今天的中国，经济实现了持续30多年的高速增长，城市化率超过了47%，中国特色社会主义法律体系已经形成，社会文化生活日益丰富，人民基本文化权益得到切实保障，覆盖城乡的基本医疗保障制度全面建立，社会保障体系逐步形成，教育、医药卫生、保障性住房等各项社会事业快速发展……        中国共产党党团结带领全国人民在中国这片古老的土地上，书写了人类发展史上前所未有的壮丽篇章。90年光辉历程雄辩证明：中国共产党不愧为伟大、光荣、正确的马克思主义政党，不愧为领导中国人民团结奋斗的核心力量，不愧为中华民族走向复兴的中流砥柱。
          </p>
        </div>
        <!--            头部右边-->
        <div class="reader-header-right">
          <!--                书籍图片-->
          <div class="reader-book-content-header">
            <div class="reader-book-img reader-book-img-1">
            </div>
          </div>
          <!--                按钮-->
          <div class="reader-more">
            <!--                        <div class="symposia-video-more-svg"></div>-->
            <div class="reader-more-text">开始阅读</div>
          </div>

        </div>
      </header>


      <!--        //////////////////////////-->
      <!--        目录模块-->
      <section class="reader-catalogue">
        <!--            竹子装饰-->
        <div class="reader-catalogue-decoration"></div>

        <!--            标题-->
        <div class="reader-title-item">
          <h4 class="reader-catalogue-title">目录</h4>
          <div class="read-title-decoration"></div>
        </div>

        <ul class="reader-catalogue-module">
          <li class="reader-catalogue-list">
            <div class="reader-chapter-name">先立后破着力扩大有效需求</div>
            <div class="reader-chapter-num">第<span>六</span>章</div>
          </li><li class="reader-catalogue-list">
          <div class="reader-chapter-name">让学雷锋在新时代青少年中蔚然成风</div>
          <div class="reader-chapter-num">第<span>五</span>章</div>
        </li><li class="reader-catalogue-list">
          <div class="reader-chapter-name">以健全全面从严治党体系为有效途径</div>
          <div class="reader-chapter-num">第<span>四</span>章</div>
        </li><li class="reader-catalogue-list">
          <div class="reader-chapter-name">推进理论创新的科学指引</div>
          <div class="reader-chapter-num">第<span>三</span>章</div>
        </li><li class="reader-catalogue-list">
          <div class="reader-chapter-name">坚定对中国经济的自信</div>
          <div class="reader-chapter-num">第<span>二</span>章</div>
        </li><li class="reader-catalogue-list">
          <div class="reader-chapter-name">坚持在法治基础上推进高水平对外开放</div>
          <div class="reader-chapter-num">第<span>一</span>章</div>
        </li>
        </ul>
      </section>

      <!--        /////////////////////-->
      <!--        文章摘要模块-->
      <section class="reader-picked">
        <!--            摘要左边-->
        <div class="reader-picked-left">
          <!--                标题-->
          <div class="reader-title-item-2">
            <h4 class="reader-catalogue-title">摘要</h4>
            <div class="read-title-decoration"></div>
          </div>
          <!--                文字装饰-->
          <div class="reader-picked-decoration">
          </div>
          <!--                文章分割线-->
          <div class="reader-picked-decoration-2">
          </div>
          <p class="reader-picked-text">
            由于文革十年反复播放样板戏，人们已经养成听唱的下意识习惯，1976年后相当长一段时间里样板戏的选段仍然被照常播放由于文革十年反复播放样板戏......
          </p>
          <p class="reader-picked-text">
            由于文革十年反复播放样板戏，人们已经养成听唱的下意识习惯，1976年后相当长一段时间里样板戏的选段仍然被照常播放由于文革十年反复播放样板戏，人们已经养成听唱的下意识习惯......
          </p>
        </div>
        <!--            摘要右边-->
        <div class="reader-picked-right">
          <p class="reader-picked-text-2">
            由于文革十年反复播放样板戏，人们已经养成听唱的下意识习惯人们已经养成听唱的下意识习惯，人们已经养成听唱的下意识习惯，由于文革十年反复播放样板戏，1976年后相当长一段时间里样板戏的选段仍然被照常播放。1976年后相当长一段时间里样板戏的选段仍然被照常播放。1976年后相当长一段时间里样板戏的选段仍然被照常播放。曾陆续引起巴金等人的......
          </p>
        </div>

        <!--            印章装饰-->
        <div class="reader-picked-decoration-3"></div>
      </section>



      <!--        /////////////////////-->
      <!--        推荐期刊模块-->
      <section class="reader-recommend">
        <div class="reader-recommend-title">
          推荐
        </div>

        <div class="reader-recommend-item">
          <!--                左边推荐-->
          <div class="reader-recommend-left">
            <div class="reader-recommend-list">
              《毛泽东的诗性人生》
            </div>
            <div class="reader-recommend-list">
              《漫谈党史学习》
            </div>
            <div class="reader-recommend-list">
              《向苍穹：中国天文发展三部曲》
            </div>
            <div class="reader-recommend-list">
              《转折：1947年中共中央在陕北》
            </div>
          </div>
          <!--                右边推荐-->
          <div class="reader-recommend-right">
            <div class="reader-recommend-list">
              《向苍穹：中国天文发展三部曲》
            </div>
            <div class="reader-recommend-list">
              《转折：1947年中共中央在陕北》
            </div>
            <div class="reader-recommend-list">
              《毛泽东的诗性人生》
            </div>
            <div class="reader-recommend-list">
              《漫谈党史学习》
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<style scoped>

.banner{
  width: 151.3rem;
  margin: 0 auto;
  background-color: rgba(229, 229, 229, 1);
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
}


.main{
  width:108rem;
  margin: 0 auto;
  background-color: white;
}

/*<!--///////////////////////////-->*/
/*<!-- 总体介绍书籍头部-->*/
.reader-header{
  width:100%;
  padding: 5rem;
  padding-top: 3rem;
  display: flex;
  position: relative;
  border-bottom: 2px solid #ccc;
}
.reader-header-left{
  width:10rem;
  height:100%;
}
.reader-header-decoration-2{
  position: absolute;
  width:10rem;
  height:10rem;
  left:2rem;
  top:5rem;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("src/assets/images/reader-decoration-3.png");
  color: white;
  font-weight: bolder;
  font-size: 1.8rem;
  text-wrap: unset;
  background-size: cover;
  text-align: center;
  padding-top: 2.5rem;
}
.reader-header-decoration-2 span{
  width:2rem;
  height:5rem;
  font-family: 华文行楷;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  line-height: 2rem;
}
.reader-title{
  width:5rem;
  height: 23rem;
  padding-right: 2rem;
  border-right: 2px solid  #EBEBEB;
  font-size: 3.5rem;
  color: #ccc;
  margin-top: 15rem;
  font-family: 华文楷体;
  text-wrap: unset;

}
.reader-header-middle{
  flex: 1;
  height:100%;
  padding-top: 2rem;
}
.reader-header-title-1,.reader-header-book-title{
  font-size: 2.5rem;
  color: black;
  line-height: 4rem;

}
.reader-header-book-title{
  margin-left: -1rem;
}
.reader-header-decoration-1{
  width:3rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  height:0.5rem;
  background-color: rgb(128,0,0);
}
.reader-header-author,.reader-header-publisher,.reader-header-time{
  font-size: 1.5rem;
  color: black;
  letter-spacing: 3px;
}
.reader-header-author span{
  margin-left: 1.5rem;
}
.reader-header-blurb{
  font-size: 1.2rem;
  color:darkgray;
  width:40rem;
  line-height: 3rem;
  margin-top: 3rem;
}
.reader-header-right{
  width: 40rem;
  height:100%;
  padding-top: 3rem;
}

.reader-book-content-header{
  width:100%;
  height:40rem;
  background-color: rgb(243,243,243);
  position: relative;
}
.reader-book-img{
  width:25rem;
  height:30rem;
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  background-repeat: no-repeat;
  background-size:cover;
  background-image: url("src/assets/images/symposia-book-2.png");
  background-position: center;
}
.reader-more{
  width:20rem;
  height: 3.5rem;
  border-radius: 1rem;
  display: flex;
  position: relative;
  background-color:black;
  margin-top: 3rem;
  margin-left: 10rem;
}
.reader-more-text{
  font-size: 1.4rem;
  color:#E6E8E6;
  font-weight: bolder;
  line-height: 3.5rem;
  letter-spacing: 3px;
  margin-left: 7rem;
}


/*////////////////*/
/*目录模块*/
.reader-catalogue{
  width:100%;
  /*height:50rem;*/
  padding-top: 5rem;
  padding-bottom: 5rem;
  position: relative;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left;
  border-bottom: 2px solid #ccc;
}
.reader-title-item{
  display: flex;
  z-index: 5;
  justify-content: right;
}
.reader-title-item-2{
  justify-content: left;
  display: flex;
  margin-left: 10rem;
}
.reader-catalogue-title{
  font-size: 2.5rem;
  font-weight:bolder;

}
.read-title-decoration{
  width:1rem;
  height:3.5rem;
  margin-right: 15rem;
  margin-left:1.5rem;
  background-color:rgb(128,0,0);
}
.reader-catalogue-decoration{
  width:40%;
  height:40rem;
  height:100%;
  position: absolute;
  left:0;
  bottom: 0;
  background-repeat: no-repeat;
  background-image: linear-gradient(to bottom,rgba(250,250,250,0.9),rgba(250,250,250,0.8)),url("src/assets/images/reader-decoration-2.png");
  background-size: cover;
  background-position:bottom;
}

.reader-catalogue-module{
  margin-left: 20rem;
  width:70%;
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
  padding-top: 5rem;
}
.reader-catalogue-list{
  width:10rem;
  display: flex;
  justify-content: flex-end;
  height:20rem;
  margin-left: 2rem;
  z-index: 5;
  font-weight: bolder;
}
.reader-chapter-num{
  z-index: 10;
  width:2rem;
  text-wrap: unset;
  color: #B4AF9D;
  font-size: 1.6rem;
  font-weight: bolder;
  margin-left: 1rem;
}
.reader-chapter-name{
  z-index: 10;
  margin-top: 4.5rem;
  height:11rem ;
  color: dimgrey;
  font-size: 1.3rem;
  writing-mode: vertical-rl;
  letter-spacing: 2px;
  line-height: 2rem;
}


/*///////////////*/
/*摘要模块*/
.reader-picked{
  width:100%;
  padding-top: 6rem;
  height:45rem;
  position: relative;
  display: flex;
}
.reader-picked-left{
}
.reader-picked-right{
  padding-left: 17rem;
  flex: 1;
  padding-top: 5rem;
}
.reader-picked-decoration{
  width: 50%;
  height:100%;
  position: absolute;
  right:0;
  bottom:0;
  background-image:  linear-gradient(to right,rgba(250,250,250,0.6),rgba(250,250,250,0)),url("src/assets/images/reader-decoration-4.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.reader-picked-decoration-2{
  width:1.5px;
  height:30rem;
  position: absolute;
  left:50%;
  top:12rem;
  background-color: #EBEBEB;
}
.reader-picked-text{
  width:35rem;
  /*margin: 6rem;*/
  color: #B4AF9D;
  margin-top: 4rem;
  font-size: 1.4rem;
  margin-left: 10rem;
  line-height: 3rem;
}
.reader-picked-text-2 {
  font-size: 1.4rem;
  width:39rem;
  position: absolute;
  z-index: 5;
  color: #B4AF9D;
  line-height: 3.5rem;
  letter-spacing: 2px;
  margin-top: 2rem;
}
.reader-picked-decoration-3{
  width:4.5rem;
  height:4.5rem;
  margin-right: 10rem;
  z-index: 10;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("src/assets/images/reader-decoration-1.png");
}

/*///////////////////////*/
/*推荐期刊模块*/
.reader-recommend{
  width:100%;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  padding-bottom: 10rem;
  background-image:linear-gradient(to bottom,rgba(250,250,250,0.3),rgba(250,250,250,0.3)),url("src/assets/images/reader-decoration-6.jpg");
}
.reader-recommend-title{
  width:20rem;
  margin: 0 auto;
  height:12rem;
  background-image: linear-gradient(to bottom,rgba(250,250,250,0.3),rgba(250,250,250,0.3)),url("src/assets/images/reader-decoration-5.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size:contain;
  letter-spacing: 1.5rem;
  line-height: 12rem;
  text-align: right;
  padding-right: 5rem;
  font-size: 3rem;
  font-family: 华文行楷;
}
.reader-recommend-item{
  width:70rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}
.reader-recommend-left,.reader-recommend-right{
  width:40%;
  height:100%;
  display: flex;
}
.reader-recommend-left{
  justify-content: flex-end;
}
.reader-recommend-right{
  justify-content: flex-start;
}
.reader-recommend-list{
  writing-mode:vertical-lr;
  font-weight: bolder;
  font-size: 1.6rem;
  font-family: 楷体;
  color: grey;
  margin:2rem 1.5rem;
}
.reader-recommend-list:before{
  width:2rem;
  height:2rem;
  color:rgb(128,0,0);
  content: "⬤";
  font-size: 1.5rem;
}
</style>